<script lang="ts" setup>
import {
  ShoppingCart,
  Edit,
  Plus
} from '@element-plus/icons-vue';
import { ref } from 'vue'
//  用户的所有信息
const userInfo = ref({
    id: 0,
    username: 'zhangsan',
    password: '12345',
    name: 'zs',
    gender: 0,
    sex: '男',
    image: '../png',
    phone: '312413432412',
    money: '250',
    role: 0,
    createTime: '2024',
    updateTime: '2024'
})

const rules = {
    username: [
        { required: true, message: '请输入用户昵称', trigger: 'blur' },
        {
            pattern: /^\S{1,10}$/,
            message: '昵称必须是1-10位的非空字符串',
            trigger: 'blur'
        }
    ],
    name: [
        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
        { type: 'name', message: '邮箱格式不正确', trigger: 'blur' }
    ]
}

//  用户数据模型 （用于更新用）
// const UserModel = ref({
//     id: '',
//     username: '',
//     password: '',
//     name: '',
//     gender: '',
//     sex: '',
//     image: '',
//     phone: '',
//     money: '',
//     role: '',
//     createTime: '',
//     updateTime: ''
// })

import { ElMessage, ElMessageBox } from 'element-plus'
// 用户的信息Store
import { useUserInfoStore } from '@/store/user.js';
const userInfoStore = useUserInfoStore()
import { userInfoGetService, userInfoUpdateService } from "@/api/user";
// Token的Store
import { useTokenStore } from '@/store/token.js'; 
const tokenStore = useTokenStore();


//获取上一次上传的图片的地址
// import { imageStore } from '@/store/image.js'

// const imageInfoStore = imageStore();
//  图片地址
// const Image = ref(imageInfoStore.info)

//修改用户信息
// import {userInfoUpdateService} from '@/api/user.js'
// import { ElMessage } from 'element-plus';
// const updateUserInfo = async ()=>{
//     let result = await userInfoUpdateService(userInfo.value)
//     ElMessage.success(result.message? result.message:'修改成功')
//     //更新pinia中的数据
//     userInfoStore.info.nickname=userInfo.value.nickname
//     userInfoStore.info.email = userInfo.value.email
// }

//   查询用户信息
const userinfo = async () => {
    console.log('用户资料：')
    console.log(userInfoStore.info)
    let result = await userInfoGetService(userInfoStore.info.id)

    userInfo.value = result.data
    // //为列表中添加sex属性
    //     for (let i = 0; i < userInfo.value.length; i++) {
    //     let info = userInfo.value[i];
    //     for (let j = 0; j < userInfo.value.length; j++) {
    //       if (info.gender === 0) {
    //         info.sex = '男'
    //       } else if (info.gender === 1) {
    //         info.sex = '女'
    //       }
    //     }
    //   }
}
userinfo()

//  修改个人信息
const updateUserInfo = async () => {
    console.log('个人信息：')
    console.log(userInfo)
    let result = await userInfoUpdateService(userInfo.value)

    // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '修改成功')

    } else {
        ElMessage.error('修改失败')
    }
    userinfo()

    window.location.href = window.location.href
}

//  为 UserModel赋值
// const showdata = () => {
//     UserModel.value.id = userInfo.value.id,
//     UserModel.value.username = userInfo.value.username
//     UserModel.value.password = userInfo.value.password
//     UserModel.value.name = userInfo.value.name
//     UserModel.value.name = userInfo.value.name
// }



//  上传成功的回调      头像回显
const uploadSuccess=(result)=>{
    userInfo.value.image = result.data
    console.log(result.data);
    
}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>基本资料</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="用户编号">
                        <el-input v-model="userInfo.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="userInfo.username"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="密码" prop="password">
                        <el-input v-model="userInfo.password"></el-input>
                    </el-form-item> -->
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="userInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="提示" prop="null">
                        <el-text class="mx-1" type="primary">男: 0 女: 1 </el-text>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-select placeholder="请选择" v-model="userInfo.gender" style="width: 240px;">
                            <el-option label="男" value="0"></el-option>
                            <el-option label="女" value="1"></el-option>
                            <!-- ● key的作用：提高重排效率，就地复用
                         :key="dict.id"//唯一值
                         :label="dict.name"//显示的值
                         :value="dict.id"//传给后台的值
                        -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图像" prop="image">
                        <!-- auto-upload:是否自动上传

                        action: 服务器接口路径

                        name: 上传的文件字段名

                        headers: 设置上传的请求头

                        on-success: 上传成功的回调函数 -->
                        <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
                        action="/api/upload"
                        name="image"
                        :headers="{'token':tokenStore.token.token }"
                        :on-success="uploadSuccess"
                        >
                            <img v-if="userInfo.image" :src=userInfo.image alt="图片走丢了" style="height: 100px" title="点击图片可以修改图像" />
                            <el-icon v-else class="avatar-uploader-icon" title="点击图片可以修改图像">
                                <Plus />
                        </el-icon>
                        </el-upload>
                        <!-- <el-input v-model="userInfo.image"></el-input> -->
                          <!-- <el-text class="mx-1" type="primary">(点击图片可以修改图像) </el-text> -->
                    </el-form-item>
                   
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="userInfo.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="钱包" prop="money">
                        <el-input v-model="userInfo.money" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="角色" prop="role">
                        <el-input v-if="userInfo.role === 0" placeholder="管理员" disabled></el-input>
                        <el-input v-if="userInfo.role === 1" placeholder="用户" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="create_time">
                        <el-input v-model="userInfo.createTime" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="修改时间" prop="update_time">
                        <el-input v-model="userInfo.updateTime" disabled></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="updateUserInfo">提交修改</el-button>
                       
                    </el-form-item>

                </el-form>
            </el-col>
        </el-row>

    </el-card>
    
</template>



<style scoped>

.avatar-uploader {

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #222325;
            width: 178px;
            height: 178px;
            text-align: center;
            background-color: #cccfd3
        }
    }
</style>